<template>
  <div class="roll-list-com">
    <div class="table-header header-1" v-if="type==1">
      <div class="tab-item name">姓名</div>
      <div class="tab-item gender">性别</div>
      <div class="tab-item age">年龄</div>
      <div class="tab-item label">技能标签</div>
      <div class="tab-item work">意向工种</div>
    </div>
    <div class="table-header header-2" v-if="type==2">
      <div class="tab-item name">名称</div>
      <div class="tab-item price">工价</div>
      <div class="tab-item total">预招人数</div>
      <div class="tab-item already">已招人数</div>
    </div>
    <div id="task-list">
      <div id="vessel" :style="{transform:`translate(0px,-${scrollTop}px)`}">
        <template v-if="type==1">
          <div class="list-item table-row row-1" v-for="(item,index) in list" :key="item.id">
            <div class="tab-item name">{{ item.name }}</div>
            <div class="tab-item gender">{{ item.sex }}</div>
            <div class="tab-item age">{{ item.age }}</div>
            <div class="tab-item label">{{ item.skill }}</div>
            <div class="tab-item work">{{ item.intention }}</div>
          </div>
        </template>
        <template v-else>
          <div class="list-item table-row row-2" v-for="(item,index) in list" :key="item.id">
            <div class="tab-item name">{{ item.name }}</div>
            <div class="tab-item price">{{ item.price }}</div>
            <div class="tab-item total">{{ item.total }}</div>
            <div class="tab-item already">{{ item.already }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "RollList",
  data() {
    return {
      color:['','#01d7a3','#ffa600','#fa000c'],
      list: [],
      taskTimer:null,
      scrollTop:0,
    }
  },
  props:['type'],
  beforeDestroy() {
    clearInterval(this.taskTimer);
  },
  methods:{
    initData(){
      this.list=this.type==1?[
        {name:'祁*梅',sex:'女',age:'52',skill:'护理',intention:'保姆、保洁'},
        {name:'刘*涛',sex:'男',age:'41',skill:'A照',intention:'大车司机、小车司机'},
        {name:'冯*',sex:'女',age:'33',skill:'初级会计',intention:'挖洋葱'},
        {name:'刘*成',sex:'男',age:'54',skill:'瓦工',intention:'瓦工、腻子工'},
        {name:'李*',sex:'女',age:'31',skill:'计算机应用',intention:'搬运工'},
        {name:'王*兵',sex:'男',age:'47',skill:'电工',intention:'电工'},
        {name:'寇*辉',sex:'女',age:'49',skill:'',intention:'酒店服务'},
        {name:'候*',sex:'女',age:'39',skill:'装饰美工',intention:'装饰美工'},
        {name:'赵*龙',sex:'男',age:'51',skill:'B照',intention:'长途、短途'},
        {name:'冯*基',sex:'男',age:'49',skill:'木工',intention:'木工、架子工'},
        {name:'仲*',sex:'女',age:'29',skill:'花卉工',intention:'园林护理'},
        {name:'祁*梅',sex:'女',age:'52',skill:'护理',intention:'保姆、保洁'},
        {name:'刘*涛',sex:'男',age:'41',skill:'A照',intention:'大车司机、小车司机'},
        {name:'冯*',sex:'女',age:'33',skill:'初级会计',intention:'挖洋葱'},
        {name:'刘*成',sex:'男',age:'54',skill:'瓦工',intention:'瓦工、腻子工'},
        {name:'李*',sex:'女',age:'31',skill:'计算机应用',intention:'搬运工'},
        {name:'王*兵',sex:'男',age:'47',skill:'电工',intention:'电工'},
        {name:'寇*辉',sex:'女',age:'49',skill:'',intention:'酒店服务'},
        {name:'候*兰',sex:'女',age:'39',skill:'装饰美工',intention:'装饰美工'},
        {name:'赵*龙',sex:'男',age:'51',skill:'B照',intention:'长途、短途'},
        {name:'冯*基',sex:'男',age:'49',skill:'木工',intention:'木工、架子工'},
        {name:'仲*',sex:'女',age:'29',skill:'花卉工',intention:'园林护理'},
      ]:[
        {name:'快递装卸、分拣',price:'180/天',total:'2人',already:'0人'},
        {name:'小工',price:'210/天',total:'2人',already:'1人'},
        {name:'小麦装卸工',price:'300/天',total:'4人',already:'3人'},
        {name:'制种西瓜籽机上瓜',price:'100/天',total:'3人',already:'0人'},
        {name:'洋葱装卸工',price:'300/天',total:'7人',already:'3人'},
        {name:'保洁',price:'100/天',total:'3人',already:'1人'},
        {name:'装卸工',price:'300/天',total:'10',already:'6人'},
        {name:'修电路',price:'400/天',total:'2',already:'0人'},
        {name:'修电路',price:'400/天',total:'2',already:'0人'},
        {name:'热水器维修',price:'150/天',total:'1',already:'0人'},
        {name:'医院陪护',price:'600/天',total:'1',already:'0人'},
        {name:'水泥装卸',price:'400/天',total:'8',already:'5人'},
        {name:'叉车司机',price:'150/天',total:'10人',already:'5人'},
        {name:'小工',price:'210/天',total:'2人',already:'1人'},
        {name:'小麦装卸工',price:'300/天',total:'4人',already:'3人'},
        {name:'制种西瓜籽机上瓜',price:'100/天',total:'3人',already:'0人'},
        {name:'洋葱装卸工',price:'300/天',total:'7人',already:'3人'},
        {name:'保洁',price:'100/天',total:'3人',already:'1人'},
        {name:'装卸工',price:'300/天',total:'10',already:'6人'},
        {name:'叉车司机',price:'150/天',total:'10人',already:'5人'},
        {name:'小工',price:'210/天',total:'2人',already:'1人'},
        {name:'小麦装卸工',price:'300/天',total:'4人',already:'3人'},
        {name:'制种西瓜籽机上瓜',price:'100/天',total:'3人',already:'0人'},
        {name:'洋葱装卸工',price:'300/天',total:'7人',already:'3人'},
        {name:'保洁',price:'100/天',total:'3人',already:'1人'},
        {name:'装卸工',price:'300/天',total:'10',already:'6人'},
        {name:'叉车司机',price:'150/天',total:'10人',already:'5人'},
        {name:'小工',price:'210/天',total:'2人',already:'1人'},
        {name:'小麦装卸工',price:'300/天',total:'4人',already:'3人'},
        {name:'制种西瓜籽机上瓜',price:'100/天',total:'3人',already:'0人'},
        {name:'洋葱装卸工',price:'300/天',total:'7人',already:'3人'},
        {name:'保洁',price:'100/天',total:'3人',already:'1人'},
        {name:'装卸工',price:'300/天',total:'10',already:'6人'},
        {name:'叉车司机',price:'150/天',total:'10人',already:'5人'},
      ];
      this.scrollTop=0;
      clearInterval(this.taskTimer);
      this.$nextTick(()=>{
        let vesselHeight=document.getElementById('vessel').offsetHeight;
        let height=document.getElementById('task-list').offsetHeight;
        if(vesselHeight>height){
          this.taskTimer=setInterval(()=>{
            if(height+this.scrollTop<vesselHeight){
              this.scrollTop++;
            }else{
              clearInterval(this.taskTimer);
              this.initData()
            }
          },100)
        }
      })
    },
  },
  mounted() {
    this.initData()
  }
}
</script>

<style scoped lang="scss">
#task-list::-webkit-scrollbar {
  width: 0;
}
.roll-list-com{
  width: 100%;
  height: 100%;
  .table-header,.table-row{
    width: 100%;
    display: flex;
    align-items: center;
    background: #232C67;
    height: 30px;
    .tab-item{
      width: 100%;
      font-size: 14px;
      text-align: center;
      color:#fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .table-row{
    .tab-item{
      font-size: 12px;
    }
  }
  .table-header.header-1,.table-row.row-1{
    .name{
      width: 15%;
    }
    .gender{
      width: 10%;
    }
    .age{
      width: 10%;
    }
    .label{
      width: 30%;
    }
    .work{
      width: 35%;
    }
  }
  .table-header.header-2,.table-row.row-2{
    .name{
      width: 50%;
    }
    .price{
      width: 20%;
    }
    .total{
      width: 15%;
    }
    .already{
      width: 15%;
    }
  }
  .table-row:nth-child(odd){
    background: #0A1456;
  }
  #task-list{
    width: 100%;
    height: calc(100% - 30px);
    overflow: hidden;
  }
  .list-item{
    width: 100%;
    .list-title-block{
      width: 100%;
      display: flex;
      align-items: center;
      height: 22px;
      margin-bottom: 10px;

    }
  }
}
</style>
